<template>
  <div v-if="!inputOnly" class="chat-window">
    <el-scrollbar class="messages">
      <div v-for="(msg, idx) in messages" :key="idx" :class="['msg', msg.role]">
        <div class="bubble">{{ msg.content }}</div>
      </div>
    </el-scrollbar>
    <InputBar :input-value="inputValue" @send="onSend" />
  </div>
  <InputBar v-else :input-value="inputValue" @send="onSend" />
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'
const props = defineProps({ messages: Array, inputOnly: Boolean })
const emit = defineEmits(['send'])
const inputValue = ref('')

function onSend() {
  if (!inputValue.value.trim()) return
  emit('send', inputValue.value)
  inputValue.value = ''
}
</script>

<script>
// 内部输入区组件
export default {
  components: {
    InputBar: {
      props: ['inputValue'],
      emits: ['send'],
      data() {
        return {}
      },
      methods: {
        handleSend() {
          if (!this.inputValue.trim()) return
          this.$emit('send')
        },
        handleKeyup(e) {
          if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault()
            this.handleSend()
          }
        }
      },
      template: `
        <div class="input-bar">
          <el-input
            v-model="inputValue"
            placeholder="来说点什么吧...（shift+enter换行，'/'触发提示词）"
            maxlength="2000"
            show-word-limit
            class="input-main"
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 4 }"
            @keyup="handleKeyup"
          />
          <el-button
            type="primary"
            class="send-btn"
            :disabled="!inputValue.trim()"
            @click="handleSend"
          >
            <i class="el-icon-caret-right"></i> 发送
          </el-button>
        </div>
      `
    }
  }
}
</script>

<style scoped>
.chat-window {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
}
.messages {
  flex: 1;
  padding: 24px 16px 12px 16px;
  overflow-y: auto;
}
.msg {
  display: flex;
  margin-bottom: 12px;
}
.msg.user {
  justify-content: flex-end;
}
.msg.ai {
  justify-content: flex-start;
}
.bubble {
  max-width: 70%;
  padding: 12px 18px;
  border-radius: 18px;
  font-size: 1rem;
  line-height: 1.6;
  background: #fff;
  color: #333;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.msg.user .bubble {
  background: #4d8aff;
  color: #fff;
}
.input-bar {
  display: flex;
  align-items: flex-end;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(77,138,255,0.08);
  padding: 18px 24px 18px 24px;
  margin-top: 12px;
  gap: 18px;
}
.input-main {
  flex: 1;
  font-size: 1.15rem;
  border-radius: 12px;
  min-height: 44px;
  background: #f7fbff;
  color: #333;
}
.input-main ::placeholder {
  color: #bfc8d7;
}
.send-btn {
  font-size: 1.15rem;
  height: 44px;
  min-width: 100px;
  border-radius: 10px;
  background: linear-gradient(90deg, #4d8aff 0%, #a0cfff 100%);
  color: #fff;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(77,138,255,0.12);
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
}
.send-btn:disabled {
  background: #eaf3ff;
  color: #bfc8d7;
}
</style> 